<template>
  <el-upload
    v-if="!formData[control.prop] && control.progress === 0"
    action=""
    :http-request="(data) => upload(control.prop, data, control)"
    :multiple="false"
    :show-file-list="false"
  >
    <div
      style="
        width: 100px;
        height: 100px;
        border: 1px dashed black;
        display: flex;
        justify-content: center;
        align-items: center;
      "
    >
      <i class="el-icon-circle-plus-outline" style="font-size: 30px"></i>
    </div>
  </el-upload>
  <div
    v-else
    style="
      width: 100px;
      height: 100px;
      border: 1px dashed black;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    "
  >
    <template v-if="!formData[control.prop] && control.progress > 0">
      <el-progress
        type="circle"
        :percentage="control.progress"
        :width="100"
      ></el-progress>
    </template>
    <template v-else-if="formData[control.prop]">
      <div>
        <el-image
          :src="formData[control.prop]"
          :preview-src-list="[formData[control.prop]]"
          style="width: 100px; height: 100px; vertical-align: bottom"
        ></el-image>
        <i
          class="el-icon-circle-close close"
          style="
            position: absolute;
            top: 0px;
            right: -20px;
            font-size: 20px;
            font-weight: bold;
          "
          @click="remove"
        ></i>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: "SingleUpload",
  props: {
    control: {
      type: Object,
    },
    formData: {
      type: Object,
    },
    upload: {
      type: Function,
    },
  },
  methods: {
    remove() {
      this.control.remove();
    },
  },
};
</script>

<style lang="scss" scoped>
.close {
  color: black;
  &:hover {
    cursor: pointer;
    color: red;
  }
}
</style>
